<template>
	<view class="content">
		<view class="welcome">
			<view class="text">欢迎来到</view>
			<view class="last">中餐厅</view>
		</view>
		<view class="welcome_main">
			<view>您好，请选择就餐人数</view>
			<view class="welcome_main_text">
				<text>桌号：</text>
				<text>{{table_num}}</text>
			</view>
			<view class="welcome_main_choose">
				<view :class="['welcome_main_choose_item', num === index ? 'welcome_main_choose_item_active':'']" v-for="(item,index) in people" @click="chosePeople(index,item)">
					{{item}}
				</view>
			</view>
			<view :class="['welcome_menu', !isShowAdd ? 'welcome_menu_active' :'welcome_menu_normal']" @click="stateMenu">
				开始点餐
			</view>
		</view>
		
	</view>
</template>

<script>
	// l连接数据库
	const db = wx.cloud.database()
	const good_collect = db.collection('order_data')
	export default {
		data() {
			return {
				table_num: null,
				num:-1,
				people:[1,2,3,4,5,6,7,8,9,10],
				isShowAdd:false
			}
		},
		onLoad(e) {
			// e中可以获取到扫码的信息
			this.table_num = e.number
			// 缓存到本地
			wx.setStorageSync('table_num',e.number)
		},
		methods: {
			
			// 开始点餐
			stateMenu() {
				console.log(this.num);	
				if(this.num <= -1) return false
				wx.reLaunch({
					url:'/pages/home-page/page'
				})
			},
			// 选择人数
			chosePeople(index,item) {
				this.isShowAdd = true
				this.num = index
				wx.setStorageSync('number_of_diners',item)
			},
			async query_order() {
				try{
					const res = await good_collect.where({table_number:this.table_num,transac_status:'unsettled'}).get()
					if(res.data.length > 0) {
						wx.reLaunch({
							url:'/pages/home-page/page'
						})
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}

	
	// https://ordering-meals-1306719508.cos.ap-nanjing.myqcloud.com/users/saoma-beijing.jpg
</script>

<style>
	.content {
		height: 100vh;
		background: url('https://ordering-meals-1306719508.cos.ap-nanjing.myqcloud.com/users/beijing-a.jpg') no-repeat transparent;
		background-size: cover;
	}
	.welcome {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100px;
	}
	.text {
		font-size: 50rpx;
	}
	.last {
		margin-top: 30rpx;
		font-size: 50rpx;
	}
	.welcome_main {
		padding: 20px;
		background-color: #fff;
		position: fixed;
		left:30rpx;
		right:30rpx;
		bottom:100rpx;
		border-radius:15rpx;
		height: 550rpx;
	}
	.welcome_main_text {
		font-weight: 600;
		font-size: 30rpx;
		color: #000;
	}
	.welcome_main_text {
		font-size: 26rpx;
		color: #000;
		margin-top: 10rpx;
	}
	.welcome_main_choose {
		display: flex;
		overflow-x: auto;
		gap:10rpx;
		margin-top: 150rpx;
	}
	.welcome_main_choose_item {
		padding: 20rpx 60rpx;
		background-color: rgba(192,192,192,.1);
	}
	.welcome_main_choose_item_active {
		background-color: #f7d45f;
	}
	.welcome_menu {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		background-color: #f7d45f;
		margin-top: 130rpx;
		font-size: 36rpx;
	}
	.welcome_menu_active {
		background-color: rgba(247,212,95,.1);
		color:#ccc;
	}
	.welcome_menu_normal {
		background-color: #f7d45f;
		color:#000;
	}
	
</style>
